<template>
    <div>
        <header>
            <div
                :ref="navbarref"
                :class="[
                    'container-fluid',
                    'fixed-top',
                    'mynavigationbar-dceff036a563faf668b4d4a50fd702d1d95',
                ]"
                style="padding-right: 0; padding-left: 0"
            >
                <nav
                    :class="[
                        'navbar',
                        'navbar-expand-sm',
                        'navbar-light',
                        'Translucent-background',
                    ]"
                    style="padding-right: 0; padding-left: 0"
                >
                    <div
                        class="mynavbar nav-3fa9878ebc0dbb05688f058e3bcafc57386"
                    >
                        <Toggledisplayofsidebar
                            :onclick="togglecebian"
                        ></Toggledisplayofsidebar>

                        <div v-if="widescreen">
                            <RouterLink
                                :to="indexhref"
                                :class="[
                                    'navigate',
                                    'navbar-brand',
                                    'mui-btn',
                                    'mui-btn-primary',
                                    'mui-btn-outlined',
                                    indexactive ? 'active' : '',
                                ]"
                            >
                                {{ mytitle }}
                            </RouterLink>
                        </div>
                        <div v-if="narrowscreen">
                            <RouterLink
                                :to="indexhref"
                                :class="[
                                    'navigate',
                                    'navbar-brand',
                                    'mui-btn',
                                    'mui-btn-primary',
                                    'mui-btn-outlined',
                                    indexactive ? 'active' : '',
                                ]"
                            >
                                <span class="house-icon" />
                            </RouterLink>
                        </div>

                        <NavHomeLink
                            :href="repository"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <div v-if="widescreen">存储库</div>
                            <div v-if="narrowscreen">
                                <span class="github-icon" />
                            </div>
                        </NavHomeLink>
                        <button
                            :class="[
                                'mui-btn',
                                'mui-btn-primary',
                                'mui-btn-outlined',
                                'mybutton-8731e6c5bb5148e49e14cca7cdfa73e8',
                            ]"
                            type="button"
                            v-on:click="scrolltotop"
                        >
                            <div v-if="widescreen">顶部</div>
                            <div v-if="narrowscreen">
                                <span class="up-icon" />
                            </div>
                        </button>
                        <button
                            :class="[
                                'mui-btn',
                                'mui-btn-primary',
                                'mui-btn-outlined',
                                'mybutton-8731e6c5bb5148e49e14cca7cdfa73e8',
                            ]"
                            type="button"
                            v-on:click="scrolltobottom"
                        >
                            <div v-if="widescreen">底部</div>
                            <div v-if="narrowscreen">
                                <span class="down-icon" />
                            </div>
                        </button>
                        <button
                            :class="[
                                'mui-btn',
                                'mui-btn-primary',
                                'mui-btn-outlined',
                                'mybutton-8731e6c5bb5148e49e14cca7cdfa73e8',
                            ]"
                            type="button"
                            @click="clickprevpagelink"
                        >
                            <div v-if="widescreen">前页</div>
                            <div v-if="narrowscreen">
                                <span class="left-icon" />
                            </div></button
                        ><button
                            :class="[
                                'mui-btn',
                                'mui-btn-primary',
                                'mui-btn-outlined',
                                'mybutton-8731e6c5bb5148e49e14cca7cdfa73e8',
                            ]"
                            type="button"
                            @click="clicknextpagelink"
                        >
                            <div v-if="widescreen">后页</div>
                            <div v-if="narrowscreen">
                                <span class="right-icon" />
                            </div>
                        </button>
                        <Toggledisplayofsidebar
                            :onclick="togglesidebarright"
                        ></Toggledisplayofsidebar>
                    </div>
                </nav>
            </div>
        </header>
        <div
            class="mybodycontainer mybody-143af32b9b8f396b798aeb8d4ee68ed9ca3"
            :style="{
                'margin-top': navbarheight + 'px',
            }"
            ref="mybody_143af32b9b8f396b798aeb8d4ee68ed9ca3"
        >
            <main
                :style="{
                    'margin-left': left + 'px',
                    'margin-right': right + 'px',
                }"
            >
                <div class="container" style="padding-left: 20px">
                    <div>
                        <div
                            ref="contentcontainer_9ce8d13b9be97b46e89aeea8f242169cfa1"
                            :class="'contentcontainer-9ce8d13b9be97b46e89aeea8f242169cfa1'"
                            style="margin-left: auto"
                        >
                            <h5
                                v-if="errorcontent"
                                :class="'markdownerror-4c6b19f7b26c2b519b8ff480769b5565d6b'"
                                v-show="showerror && errorcontent"
                                v-text="errorcontent"
                            ></h5>
                            <div>
                                <Articlemarkdown />
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <Bigloading v-show="showload" />
        <Sidebarleft
            :top="navbarheight"
            :innerref="sidebarinnerref"
            v-show="!!xianshicebianlan"
        ></Sidebarleft>
        <Sidebarright
            :top="navbarheight"
            :html="sidebarrighthtml"
            v-show="!!(sidebarrighthtml && showsidebarright)"
            :innerref="sidebarrightref"
        ></Sidebarright>
        <section v-if="error">
            <div class="loadingparent-b80f303d89182a8e58b02981c0822deb975">
                <div class="loading-36bec0d286ad9ab9ca8c1d923b0095c1c06">
                    <h1 class="mybigloading">Error!</h1>
                    <br />
                    <h3>{{ catalogueurl }}</h3>
                    <h3>{{ error }}</h3>
                </div>
            </div>
        </section>
    </div>
</template>

<script src="./app-home.ts"></script>

<style scoped>
.mybodycontainer {
    display: block;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
    align-content: stretch;
}
.mynavbar {
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    align-items: stretch;
}
.down-icon {
    background-size: 100% 100%;
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("./Arrow down.svg");
}
.up-icon {
    background-size: 100% 100%;
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("./Arrow up.svg");
}
.right-icon {
    background-size: 100% 100%;
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("./Arrow right.svg");
}
.left-icon {
    background-size: 100% 100%;
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("./Arrow left.svg");
}
.house-icon {
    background-size: 100% 100%;
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("./House.svg");
}
.github-icon {
    background-size: 100% 100%;
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("./github.svg");
}
</style>
